<template>
  <div class="doctor-card">
    <div class="doctor-detail">
      <!-- <img class="d_avatar" :src="item.avatar" alt="" /> -->
      <ErrorImage :src="item.avatar" />
      <div class="dt_ms"  style="width: 63%;">
        <div class="dt_top">
          <div class="d_name fz15 flexcc">{{ item.name }}</div>
          <van-rate
            :icon="icon"
            :void-icon="voidIcon"
            size="15"
            :value="item.avaSkillStar"
            readonly
            v-if="rateShow"
          />
        </div>
        <div class="d_mid flexcc">
          <div class="d_research fz12 textOver">{{ item.company }}</div>
          <div class="line"></div>
          <div class="d_pro fz12 textOver">{{ item.level }}</div>
        </div>
      </div>

      <div class="line_ask fz12 flexcc"  style="white-space:nowrap;text-overflow:ellipsis;" @click="handleJump(item)">
        {{ doctorCardMap[type] }}
      </div>
    </div>
    <div class="doctor-skill fz12 flexcc www">擅长：{{ item.expertise }}</div>
  </div>
</template>

<script>

import ErrorImage from '@/components/Error-Image'

export default {
	props: {
		item: {
			type: Object,
			default: () => ({}),
		},
		type: {
			type: String,
			default: '0',
		},
		rateShow: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		this.doctorCardMap = {
			0: '在线问诊',
			1: '预约挂号',
			2: '上门服务',
		}

		return {
			voidIcon: require('@/assets/icon/wjx.png'),
			icon: require('@/assets/icon/wjx-active.png'),
		}
	},

	methods: {
		handleJump(val) {
			this.$router.push(`/service/${this.type}/${val.id}`)
		},
	},

	components: {
		ErrorImage,
	},
}
</script>

<style lang="scss" scoped>
	.www{
		height: 46px !important;
    line-height: 23px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
    white-space: initial;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		align-items: end !important;
	}
.doctor-card {
  width: 100%;
white-space: nowrap;
  background-color: #f9f9f9;
  border-radius: 4px;

  padding: 12px 16px;

  .doctor-detail {
    display: flex;
    .d_avatar {
      width: 40px;
      height: 40px;
      background: rgba(0, 0, 0, 0);
      border: 1px solid #ffffff;
      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
      border-radius: 50%;

      margin-right: 12px;
    }

    .dt_ms {
      // display: flex;
      // align-items: ;
      width: 50%;
      flex: 1;
      .dt_top {
        display: flex;
        align-items: center;
        margin-bottom: 2.5px;
      }
      .d_name {
        margin-right: 6px;
        height: 21px;
      }
      .d_mid {
        //height: 17px;
        width: 100%;
        .d_research {
        }
        .line {
          width: 1px;
          height: 13px;
          background-color: #ddd;
          border-radius: 1px;

          margin: 0 12px;
        }
      }
    }
    .line_ask {
      padding: 2px 7px;
      border: 1px solid #ffffff;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
      border-radius: 10px;
      color: #1681d8;
      height: 17px;
    }
  }
  .doctor-skill {
    color: #666666;
    //height: 17px;

    margin-top: 8px;
  }
}
.textOver{
  max-width: 50%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>
